<template>
  <a-tabs v-model="documentTab" default-active-key="1" position="left" justify style="height: 100%" lazy-load animation>
    <a-tab-pane key="1" title="文档">
      <Document />
    </a-tab-pane>
    <a-tab-pane key="2" title="调试">
      <Debugger />
    </a-tab-pane>
    <a-tab-pane key="3" title="Open">
      <OpenApi />
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts" name="Document">
  import { LocalKeys } from '@/types/knife4j'
  import localOperates from '@/utils/localforage'
  import { MenuProps } from '@/types/menu'
  import { ISwaggerResource } from '@/store/modules/knife/types'
  import { IDocumentProps } from '@/store/modules/document/types'
  import { documentInjectionKey, ParameterProps, ResponseProps } from './types'
  import { Debugger, Document, OpenApi } from './components'

  const documentTab = ref('1')
  // const props = defineProps<{
  //   api: string
  //   method: string
  //   deprecated: boolean
  //   consumes: string[]
  //   operationId: string
  //   parameters?: ParameterProps[]
  //   produces: []
  //   responses: ResponseProps[]
  //   summary: string
  //   tags: []
  // }>()
  const props = defineProps<{
    groupName: string
    operationId: string
    controller: string
  }>()

  const route = useRoute()

  const documentProps = ref<IDocumentProps>()
  const knifeStore = useKnifeStore()

  watch(
    () => route,
    async () => {
      const resources: ISwaggerResource[] = await localOperates.getItem(LocalKeys.apisCache)
      if (resources) {
        const currentGroup: ISwaggerResource | undefined = resources.find((item: any) => {
          return item.name === props.groupName
        })
        let paths: MenuProps[] | null = currentGroup?.paths || null
        if (currentGroup && !paths) {
          // 刷新后不存在此组的api
          paths = await knifeStore.initDocket2(currentGroup)
          // 顺便更新缓存
          Object.assign(currentGroup, { paths })
          localOperates.setItem(LocalKeys.apisCache, resources)
        }
        const controller: MenuProps | null =
          paths?.find((item: any) => {
            return item.title === props.controller
          }) ?? null
        if (controller) {
          documentProps.value = controller?.children?.find((item: any) => {
            return item.props.operationId === props.operationId
          })?.props
          knifeStore.updateDocumentOption(documentProps.value as IDocumentProps)
        }
      }
    },
    {
      immediate: true,
      deep: true
    }
  )

  // provide<IDocumentProps>(documentInjectionKey, { ...(documentProps.value as unknown as IDocumentProps) })
</script>

<style lang="less" scoped>
  :deep(.arco-page-header-wrapper) {
    padding: 0;
  }

  :deep(.arco-input-append) {
    padding: 0;
  }
</style>
